<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        报修工单详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style media="print">
        .none {
            display: block;
        }
    </style>
    <style>
        .none {
            display: none;
        }
        
        .layui-table-page select {
            height: 22px;
        }
        
        #container {
            height: 100%;
            width: 100%;
        }
        
        .amap-icon img {
            width: 25px;
            height: 34px;
        }
        
        .amap-marker-label {
            border: 0;
            background-color: transparent;
        }
        
        .info {
            position: relative;
            top: 0;
            right: 0;
            min-width: 0;
        }
        
        .amap-marker-label {
            background-color: #fff;
            padding: 10px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="layui-tab-content">
        <h2>工单详情</h2>

        <div class="modal-body" id="app">
            <div class="row">
                <div class="col-xs-6">

                    <div class="box-body with-border">
                        <ul style="line-height:28px;padding-left: 15px;" class="orderInfo">
                            <li>
                                <h3>电梯信息</h3>
                                <ul>
                                    <li>使用单位：{{companyname}}</li>
                                    <li>项目名称：{{projectname}}</li>
                                    <li>电梯位置：{{address}}</li>
                                </ul>
                            </li>
                            <li>
                                <h3>工单信息</h3>
                                <ul>
                                    <li>工单编号：{{numbercode}}</li>
                                    <li>报修人： {{repairperson}}/{{tel}}</li>
                                    <li>是否维修： {{isRepair}}</li>
                                    <li>备注信息：{{reportremark}}</li>
                                </ul>
                            </li>

                            <li>
                                <h3>维修信息</h3>
                                <ul>
                                    <li>维修人：{{person}}</li>
                                    <li>维修状态： {{status}}</li>
                                    <li>维修开始时间： {{startTime}}</li>
                                    <li>维修结束时间： {{endTime}}</li>
                                    <li>耗时： {{timeConsuming}}</li>
                                    <li>备注信息：{{repairremark}}</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1" data-toggle="tab" id="mapInfo">位置信息</a></li>
                            <li><a href="#tab_3" data-toggle="tab">故障项目</a></li>
                            <li><a href="#tab_4" data-toggle="tab">电梯信息 </a></li>

                        </ul>
                        <div class="tab-content" style="padding: 0;">
                            <div class="tab-pane active" id="tab_1">
                                <p style="color: #666666;margin: 10px 0;">提示：如果没有电梯位置标识，请及时进行电梯定位操作。</p>
                                <div id="mapBox" style="height: 420px; position: relative; background: rgb(252, 249, 242);" class="amap-container">
                                    <div id="container"></div>
                                </div>

                            </div>

                            <div class="tab-pane" id="tab_3" style="height: 460px;overflow: auto;">
                                <table class="table table-bordered table-condensed table-hover" width="100%" style="margin-top: 10px;position: relative;">
                                    <thead>
                                        <tr>
                                            <th nowrap="nowrap" style="width: 25%;text-align: center">项目</th>
                                            <th nowrap="nowrap" style="width: 30%;text-align: center">要求</th>
                                            <th nowrap="nowrap" style="width: 10%;text-align: center">原因</th>
                                            <th nowrap="nowrap" style="width: 10%;text-align: center">保养人</th>
                                            <th nowrap="nowrap" style="width: 20%;text-align: center">保养时间</th>
                                            <th nowrap="nowrap" style="width: 20%;text-align: center">是否报修</th>
                                            <th nowrap="nowrap" style="width: 20%;text-align: center">是否维修</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="fault in faultList">
                                            <td align="center">{{fault.program}}</td>
                                            <td align="center">{{fault.requirement}}</td>
                                            <td align="center">{{fault.reason}}</td>
                                            <td align="center">{{fault.matinperson}}</td>
                                            <td align="center">{{fault.matintime}}</td>
                                            <td align="center">{{fault.isReport}}</td>
                                            <td align="center">{{fault.isRepair}}</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <span class="print_btn" @click='print'>打印</span>

                                <div id="print_area" class="none" media="print">
                                    <h2>报修故障项目内容及要求（报修工单）</h2>
                                    <div>项目名称：{{projectname}}&nbsp;&nbsp;&nbsp;&nbsp; 电梯位置：{{address}} </div>
                                    <ul class="ul_box">
                                        <li id="first_li">
                                            <span>序号</span>
                                            <span>故障项目（内容）</span>
                                            <span>维修基本要求</span>
                                            <span>结果</span>
                                            <span>备注</span>
                                        </li>
                                        <li v-for='(item,index) in faultList'>
                                            <span>{{index+1}}</span>
                                            <span>{{item.program}}</span>
                                            <span>{{item.requirement}}</span>
                                            <span>×</span>
                                            <span>{{item.reason}}</span>
                                        </li>
                                    </ul>
                                    <div>说明：表格中维保结果打 “√” 为正常，“×” 为异常</div>
                                    <div>备注：</div>
                                    <div>维保单位：安徽共团建筑工程有限公司</div>
                                    <div>维保时间：{{startTime}} &nbsp;&nbsp;&nbsp;&nbsp;维保时长：{{timeConsuming}} &nbsp;&nbsp;&nbsp;&nbsp; 维保人员：{{person}}</div>
                                    <div style="width: 100%;display: flex;justify-content: space-between;margin-top: 10px;">
                                        <span style="width: 50%;font-size: 16px;">维保单位签字：</span>
                                        <span style="width: 50%;font-size: 16px;">使用单位签字：</span>
                                    </div>
                                </div>

                            </div>


                            <div class="tab-pane" id="tab_4" style="height: 460px;overflow: auto;">
                                <table id="eleInfo" class="table table-bordered table-condensed" style="margin-top: 10px;">
                                    <tbody>
                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">电梯信息</th>
                                        </tr>
                                        <tr>
                                            <th width="40%">电梯类型</th>
                                            <td>{{typename}}</td>
                                        </tr>
                                        <tr>
                                            <th>使用单位</th>
                                            <td>{{companyname}}</td>
                                        </tr>
                                        <tr>
                                            <th>项目名称</th>
                                            <td>{{projectname}}</td>
                                        </tr>
                                        <tr>
                                            <th>电梯品牌</th>
                                            <td>{{brandname}}</td>
                                        </tr>
                                        <tr>
                                            <th>制造单位</th>
                                            <td>{{makecompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>制造日期</th>
                                            <td>{{makeDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>安装单位</th>
                                            <td>{{installcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>载重</th>
                                            <td>{{maxload}}</td>
                                        </tr>
                                        <tr>
                                            <th>层站数</th>
                                            <td>{{floorsnumber}}</td>
                                        </tr>
                                        <tr>
                                            <th>控制方式</th>
                                            <td>{{controlmode}}</td>
                                        </tr>
                                        <tr>
                                            <th>额定速度</th>
                                            <td>{{speed}}</td>
                                        </tr>
                                        <tr>
                                            <th>出厂编号</th>
                                            <td>{{factorynumber}}</td>
                                        </tr>
                                        <tr>
                                            <th>运行方式</th>
                                            <td>{{operationmode}}</td>
                                        </tr>
                                        <tr>
                                            <th>设备型号</th>
                                            <td>{{equipmentmodel}}</td>
                                        </tr>
                                        <tr>
                                            <th>使用证编号</th>
                                            <td>{{numbercode}}</td>
                                        </tr>
                                        <tr>
                                            <th>注册代码</th>
                                            <td>{{regcode}}</td>
                                        </tr>
                                        <tr>
                                            <th>注册单位</th>
                                            <td>{{regcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">合同信息</th>
                                        </tr>
                                        <tr>
                                            <th>付款日期</th>
                                            <td>{{paymentDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>维保合同到期时间</th>
                                            <td>{{maintenanceEndDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>合同联系人</th>
                                            <td>{{contactperson}}</td>
                                        </tr>
                                        <tr>
                                            <th>联系电话</th>
                                            <td>{{contacttel}}</td>
                                        </tr>
                                        <tr>
                                            <th>配件约定</th>
                                            <td>{{parts}}</td>
                                        </tr>
                                        <tr>
                                            <th>税收票证</th>
                                            <td>{{taxticket}}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">年检信息</th>
                                        </tr>
                                        <tr>
                                            <th>检验人员</th>
                                            <td>{{checkperson}}</td>
                                        </tr>
                                        <tr>
                                            <th>检验单位</th>
                                            <td>{{checkcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>年检报告编号</th>
                                            <td>{{reportcode}}</td>
                                        </tr>
                                        <tr>
                                            <th>年检日期</th>
                                            <td>{{yearcheckDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>下次年检日期</th>
                                            <td>{{nextyearcheckDate}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>

<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript" src="../../js/myAjax.js"></script>
<script type="text/javascript" src="../../js/pub.js"></script>
<script type="text/javascript" src="../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=87be6752b4c542084e82804632ca8f28"></script>

<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        lement = layui.element; //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>


<script>
    var recordId = getQueryVariable("recordId");
    const vm = new Vue({
        el: "#app",
        data: {

            companyname: null,
            projectname: null,
            address: null,

            numbercode: null,
            repairperson: null,
            tel: null,
            isRepair: null,
            reportremark: null,

            person: null,
            status: null,
            startTime: null,
            endTime: null,
            timeConsuming: null,
            repairremark: null,

            addressdetail: null,
            addressLongitude: null,
            addressLatitude: null,

            typename: null,
            brandname: null,
            usenumber: null,
            makecompany: null,
            makeDate: null,
            installcompany: null,
            maxload: null,
            floorsnumber: null,
            controlmode: null,
            speed: null,
            factorynumber: null,
            operationmode: null,
            equipmentmodel: null,
            regcode: null,
            regcompany: null,
            paymentDate: null,
            maintenanceEndDate: null,
            contactperson: null,
            contacttel: null,
            parts: null,
            taxticket: null,
            checkperson: null,
            checkcompany: null,
            reportcode: null,
            yearcheckDate: null,
            nextyearcheckDate: null,
            faultList: null,
        },
        created() {

            let request = {
                url: 'maintenance/reportRepair/detail',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "POST"
            }
            sendRequest(request, (res) => {
                this.companyname = res.data.elevator.company.name;
                this.projectname = res.data.elevator.project.name;
                this.address = res.data.elevator.address;
                this.numbercode = res.data.reportRepair.numbercode;
                this.person = res.data.mainpersonList[0];
                this.repairperson = res.data.reportRepair.repairperson;
                this.tel = res.data.reportRepair.tel;
                this.isRepair = res.data.reportRepair.isRepair;
                this.reportremark = res.data.reportRepair.remark;
                this.addressLongitude = res.data.elevator.addressLongitude;
                this.addressLatitude = res.data.elevator.addressLatitude;
                this.addressdetail = res.data.elevator.addressdetail;

                if (res.data.repair != null) {
                    this.status = res.data.repair.status;
                    this.startTime = res.data.repair.startTime;
                    this.endTime = res.data.repair.endTime;
                    this.timeConsuming = res.data.repair.timeConsuming;
                    this.repairremark = res.data.repair.remark;




                }

                this.typename = res.data.elevator.type.name;
                this.brandname = res.data.elevator.brand.name;
                this.usenumber = res.data.elevator.usenumber;
                this.makecompany = res.data.elevatorParameter.makecompany;
                this.makeDate = res.data.elevatorParameter.makeDate;
                this.installcompany = res.data.elevatorParameter.installcompany;
                this.maxload = res.data.elevatorParameter.maxload;
                this.floorsnumber = res.data.elevatorParameter.floorsnumber;
                this.controlmode = res.data.elevatorParameter.controlmode;
                this.speed = res.data.elevatorParameter.speed;
                this.factorynumber = res.data.elevatorParameter.factorynumber;
                this.operationmode = res.data.elevatorParameter.operationmode;
                this.equipmentmodel = res.data.elevatorParameter.equipmentmodel;
                this.regcode = res.data.elevatorParameter.regcode;
                this.regcompany = res.data.elevatorParameter.regcompany;
                this.paymentDate = res.data.elevatorInformation.paymentDate;
                this.maintenanceEndDate = res.data.elevatorInformation.maintenanceEndDate;
                this.contactperson = res.data.elevatorInformation.contactperson;
                this.contacttel = res.data.elevatorInformation.contacttel;
                this.parts = res.data.elevatorInformation.parts;
                this.taxticket = res.data.elevatorInformation.taxticket;
                this.checkperson = res.data.elevatorInformation.checkperson;
                this.checkcompany = res.data.elevatorInformation.checkcompany;
                this.reportcode = res.data.elevatorInformation.reportcode;
                this.yearcheckDate = res.data.elevatorInformation.yearcheckDate;
                this.nextyearcheckDate = res.data.elevatorInformation.nextyearcheckDate;

                this.faultList = res.data.faultList;

            })

        },
        computed: {},
        methods: {
            print() {
                $("#first_li").css("cssText", "background-color:#BEBABA!important");
                $("#print_area").jqprint({
                    debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
                    importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
                    printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
                    operaSupport: true //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
                });
            }
        },


    });
</script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jA0VzOF5uYehineGKLNc1FBIPGDSyO7R"></script>
<script>
    setTimeout(function() {

        var map = new BMap.Map("container");

        var addressLongitude = vm.addressLongitude;
        var addressLatitude = vm.addressLatitude;

        var point = new BMap.Point(addressLongitude, addressLatitude);


        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);

        var myIcon = new BMap.Icon("../../images/dt.png", new BMap.Size(52, 60));


        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        // 将标注添加到地图
        map.addOverlay(marker);


        var opts = {
            width: 350,
            height: 50,
            title: vm.address
        };


        var infoWindow = new BMap.InfoWindow('地址：' + vm.addressdetail, opts);

        marker.addEventListener('click', function() {
            map.openInfoWindow(infoWindow, point);
        });
    }, 300);
</script>

</html>